<template>
  <div class="fwwfecwh bottombutton" style="padding-right: 20px;">
    <el-popover placement="top-start" width="220" trigger="click">
      <div style="text-align: left;">
        <el-divider>时间范围</el-divider>

        <timepick>
          <el-button type="primary" @click="1">时间选择</el-button>
        </timepick>

        <el-divider>面板选择</el-divider>

        <el-checkbox-group v-model="pannelarr" @change="1">
          <el-checkbox
            v-for="item in panneloptions"
            :label="item.value"
            :key="item.value"
            :value="item.value"
          >{{item.label}}</el-checkbox>
        </el-checkbox-group>

        <el-divider>地图类型</el-divider>
        <el-radio-group v-model="scencetype">
          <el-radio :label="item.value" v-for="item in scencetypeoptions">{{item.name}}</el-radio>
        </el-radio-group>

        <el-divider>其他</el-divider>

        <!-- <efficiency /> -->
      </div>

      <div slot="reference">
        <icon-svg
          icon-class="bianji"
          :color="'#fff5'"
          :width="iwidth"
          :height="iwidth"
          style="cursor: pointer;"
        ></icon-svg>
      </div>
    </el-popover>

    <div @click="flyto">
      <icon-svg
        icon-class="zhihuan"
        :color="'#fff5'"
        :width="iwidth"
        :height="iwidth"
        style="cursor: pointer;"
      ></icon-svg>
    </div>
    <div @click="flyori">
      <icon-svg
        icon-class="jinggai"
        :color="'#fff5'"
        :width="iwidth"
        :height="iwidth"
        style="cursor: pointer;"
      ></icon-svg>
    </div>
  </div>
</template>
<script>
import defaultmixins from "@/mixins/bigScreen/defaultmixins";

export default {
  name: "bottombuttonzz",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      flyto2d: true,
      pannelarr: ["leftpannel", "rightpannel"],
      panneloptions: [
        {
          value: "leftpannel",
          label: "左侧面板"
        },
        {
          value: "rightpannel",
          label: "右侧面板"
        },
        {
          value: "warnpannel",
          label: "告警信息"
        }
      ],
      scencetypeoptions: [
        { name: "能效", value: "nengxiao" },
        { name: "gis地图", value: "gongre" }
      ],
      scencetype: "gongre"
    };
  },
  computed: {},
  watch: {
    scencetype: {
      handler: function(n, o) {
        this.switchbtn(n);
      }
    },
    pannelarr: {
      handler: function(n, o) {
        this.switchpannel(n);
      },
      immediate: true
    }
  },
  mounted() {
    // this.$store.state.daping.scencetype = "nengxiao";
    // this.scencetype = 'nengxiao'
  },
  computed: {
    iwidth() {
      let _this = this;
      return _this.$root.setting.scale * 100 + "px";
    },
    iheight() {
      let _this = this;
      return _this.$root.setting.scale * 100 + "px";
    }
  },
  methods: {
    flyto() {
      if (this.flyto2d) {
        this.$root._earth.camera.flyTo(
          [(113.6478 * Math.PI) / 180, (34.7456 * Math.PI) / 180, 100],
          100000,
          [(0 * Math.PI) / 180, (-90 * Math.PI) / 180, 0],
          0.1
        );
        this.flyto2d = false;
      } else {
        this.$root._earth.camera.flyTo(
          [(113.6478 * Math.PI) / 180, (34.7456 * Math.PI) / 180, 100],
          100000,
          [(0 * Math.PI) / 180, (-45 * Math.PI) / 180, 0],
          0.1
        );
        this.flyto2d = true;
      }
    },
    flyori() {
      this.$root._earth.camera.flyTo(
        [(113.6478 * Math.PI) / 180, (34.7456 * Math.PI) / 180, 100],
        100000,
        [(0 * Math.PI) / 180, (-90 * Math.PI) / 180, 0],
        0.1
      );
    },
    switchpannel(type) {
      this.$store.state.daping.showhidearr = type;
      this.$message.success("切换面板成功");
    },
    switchbtn(type) {
      this.$store.state.daping.scencetype = type;
      this.$message.success("三维地图场景切换成功");
    }
  }
};
</script>
<style lang='scss'>
.bottombutton {
  .el-button--primary {
    color: #fff;
    background-color: #409eff55;
    border-color: #409eff99;
  }

  .el-button {
    padding: var(--pa);
    font-size: var(--fs);
    border-radius: var(--br);
  }
}
</style>